<template>
  <div class="contor">
    <div class="swap-box">
      <div class="swap-title">
        <div class="title">
          <h6>兑换</h6>
        </div>
        <div class="Slippage"><span>0.5% Slippage</span><i class="el-icon-setting"></i></div>
      </div>
      <div class="swap-or-cross">
        <div class="swap-button1" :class="{ active: isActiveSwap }" @click="setActive('swap')">Swap</div>
        <div class="cross-button1" :class="{ active: isActiveCross }" @click="setActive('cross')">Cross Chain</div>
      </div>
      <!-- swap -->
      <div class="sun-swap-box">
        <div class="from from-box">
          <ul>
            <li>
              <p>From:</p>
              <p></p>
            </li>
            <li>
              <div class="token-button">
                <img src="@/assets/token1.png" alt="">
                <p>WEFI</p>
              </div>
              <input type="text" placeholder="0.00">
            </li>
            <li>
              <p>Balance: -</p>
              <p>$0</p>
            </li>
          </ul>
        </div>
        <div class="arrow">
          <div class="arrow-son">
            <i class="el-icon-sort"></i>
          </div>
        </div>
        <div class="to to-box">
          <ul>
            <li>
              <p>To (estimate):</p>
              <p></p>
            </li>
            <li>
              <div class="token-button">
                <img src="@/assets/tokens2.png" alt="">
                <p>ADDY</p>
              </div>
              <input type="text" placeholder="0.00">
            </li>
            <li>
              <p>Balance: -</p>
              <p>$0</p>
            </li>
          </ul>
        </div>
        <div class="link-wallet">Connect Wallet</div>
      </div>
      <!-- Cross Chain -->
      <!-- <div class="cross-chain-box">
        <div class="from-title-box">
          <p>From</p>
          <div>connect wallet</div>
        </div>
        <div class="cross-from-box">
          <div class="from-box-one">
            <div class="from-tokens"><img src="@/assets/usdc.svg" alt=""><span>Polygon</span><i
                class="el-icon-arrow-down"></i></div>
            <div class="from-tokens"><img src="@/assets/usdc.svg" alt=""><span>FPI</span><i
                class="el-icon-arrow-down"></i></div>
          </div>
        </div>
      </div> -->
    </div>
  </div>
</template>

<script>
// @ is an alias to /src

export default {
  name: 'HomeView',
  components: {
  },
  data () {
    return {
      // 分别跟踪每个盒子的激活状态
      isActiveSwap: true,
      isActiveCross: false
    }
  },
  methods: {
    setActive (type) {
      // 根据点击的是哪个盒子来更新状态
      this.isActiveSwap = type === 'swap'
      this.isActiveCross = type === 'cross'
    }
  }
}
</script>
<style scoped lang="less">
ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

* {
  margin: 0;
  padding: 0;
}

.contor {
  background-color: #12131a;
  height: 1000px;
  display: flex;
  align-items: center;
}

.swap-box {
  width: 502px;
  background-color: #1b1e29;
  margin: 0 auto;
  border-radius: 20px;
  padding: 30px 25px 25px 25px;

  .swap-title {
    display: flex;
    justify-content: space-between;
    align-items: center;

    i {
      font-size: 20px;
      margin-left: 10px;
      cursor: pointer;
    }

    i:hover {
      color: cadetblue;
    }

    .title {
      color: #c7cad9;
      font-size: 30px;
      font-weight: 500;
    }

    .Slippage {
      font-size: 16px;
      color: #696c80;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }

  .swap-or-cross {
    display: flex;
    justify-content: left;
    margin-top: 26px;
    margin-bottom: 26px;

    .swap-button1 {
      width: 100px;
      height: 46px;
      border-radius: 10px;
      font-size: 16px;
      font-weight: 700;
      display: flex;
      justify-content: center;
      align-items: center;
      color: #696c80;
      cursor: pointer;
    }

    .cross-button1 {
      width: 135px;
      height: 46px;
      border-radius: 10px;
      font-size: 16px;
      font-weight: 700;
      display: flex;
      justify-content: center;
      align-items: center;
      color: #696c80;
      cursor: pointer;
    }
  }

  .from,
  .to {
    background-color: #232734;

    border-radius: 10px;
    padding: 23px 16px 0.1px 16px;
    color: #c7cad9;
    font-weight: 500;

    li {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 23px;

      .token-button {
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 20px;
        background-color: #404557;
        width: 95px;
        height: 40px;
        cursor: pointer;

        img {
          width: 28px;
          height: 28px;
          margin-right: 4px;
        }
      }

      input {
        height: 25px;
        background-color: #232734;
        border: 0;
        color: #696c80;
        font-weight: 700;
        font-size: 18px;
      }

      input:focus {
        outline: none;
      }

      input[type="text"]::placeholder {
        text-align: right;
        color: #696c80;
        font-weight: 700;
        font-size: 18px;
      }

      input[type="text"] {
        text-align: right;
      }
    }
  }

  .from-box {
    margin-bottom: 10px;
  }

  .sun-swap-box {
    position: relative;
  }

  .arrow {
    display: flex;
    justify-content: center;
    align-items: center;
    top: 45%;
    /* 距离父容器上边距20px */
    right: 48%;
    /* 距离父容器右边距20px */
    width: 40px;
    height: 40px;
    background-color: #282d3d;
    border-radius: 50px;
    position: absolute;
    cursor: pointer;
  }

  .arrow-son {
    width: 20px;
    height: 20px;
    background-color: rgb(105, 108, 128);
    border-radius: 50px;
    display: flex;
    justify-content: center;
    align-items: center;

    i:hover {
      color: cadetblue;
    }
  }

  .link-wallet {
    width: 100%;
    height: 56px;
    background-color: #448aff;
    border-radius: 10px;
    margin-top: 21px;
    color: #fff;
    font-weight: 600;
    text-align: center;
    font-size: 18px;
    line-height: 56px;
  }

  .active {
    background-color: #fff;
    /* 变色，可以根据需求自定义 */
    color: rgb(20, 20, 20);
    /* 其他激活状态下的样式 */
  }

  .cross-chain-box {
    height: 500px;
    background-color: #111218;
    border-radius: 10px;
    margin-top: 26px;
    padding: 22px 22px 22px 22px;

    .from-title-box {
      display: flex;
      justify-content: space-between;
      align-items: center;

      p {
        font-size: 17px;
        font-weight: 500;
        color: #fff;
      }

      div {
        background-color: #5489c4;
        border-radius: 50px;
        padding: 3px 10px 3px 10px;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        font-weight: 600;
        color: rgb(20, 20, 20);
      }

    }

    .cross-from-box {

      .from-box-one {
        margin-top: 15px;
        display: flex;
        justify-content: space-between;

        .from-tokens {
          width: 174px;
          height: 36px;
          text-align: left;
          background-color: #080808;
          display: flex;
          justify-content: left;
          align-items: center;
          border-radius: 30px;
          padding: 3px 15px 3px 5px;

          img {
            width: 30px;
            height: 30px;
          }

          span {
            color: #fff;
            font-size: 18px;
            font-weight: 500;
            margin-left: 5%;
            line-height: 35px;
          }

          i {
            color: rgb(158, 169, 169);
            line-height: 36px;
            margin-left: auto;
          }
        }
      }
    }
  }

}
</style>
